<template>
    <el-menu
        :default-active="$route.path"
        style="height:100%"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectItem">
        <el-menu-item index="/welcome">
            <span>首页</span>
        </el-menu-item>
        <el-sub-menu v-for="(menu) in navMenus" :index="menu.id">
            <template #title>
              <el-icon></el-icon>
              <span>{{menu.name}}</span>
            </template>
            <el-menu-item v-for="(item) in menu.children" :index="item.href">
              <span>{{item.name}}</span>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>
<script>
    export default{
        beforeMount(){
            this.axios.get("/backend/menus").then((r)=>{
                if(r.status === 200){
                    let body = r.data
                    if(body.status === 200){
                        let data = body.data;
                        let _menus = []
                        let _items = []
                        let idx=0;
                        for(idx=0;idx<data.length;idx++){
                            let element = data[idx];
                            if(element.id != '-1'){
                                if(element.href == null){
                                    element.children = []
                                    _menus.push(element)
                                }else{
                                    _items.push(element)
                                }
                            }
                        }
                        _items.forEach(e=>{
                            _menus.forEach(p=>{
                                if(e.parentId === p.id){
                                    p.children.push(e)
                                    return false
                                }
                            }) 
                        });
                        console.log("login => ",_menus)
                        this.navMenus = _menus
                    }
                }
            });
        },
        mounted(){
            console.log("Nav mounted ..", this.mavMenus)  
        },
        data(){
            return {
                navMenus:[]
            }
        },
        methods:{
            selectItem(index){
                this.$router.push(index)
            }
        }
    }
</script>
